import type { EChartsOption } from "echarts";
import * as echarts from 'echarts/core'

export function getOption():EChartsOption {
  return  {
    color: ['#3cb2d7', 'rgba(217, 185, 107, 1)', 'rgba(200, 65, 65, 1)', 'rgba(113, 113, 113, 1)'],
    legend: {
      bottom: '15%',
      itemWidth: 10,
      itemHeight: 8,
      itemGap: 15,
      textStyle: {
        fontFamily: 'MicrosoftYaHei',
        fontSize: 14,
        color: 'rgba(178, 175, 173, 1)'
      },
      data: ['第一季度', '第二季度', '第三季度', '第四季度']
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: 'rgba(42, 51, 74, 0.89)',
      borderColor: 'transparent',
      formatter: function (params:any) {
        let returnData = '<div style="padding: 2px 10px;">'
        returnData += '<span style="font-family: MicrosoftYaHei; font-size: 14px; color: rgba(210, 221, 249, 1);">' + params[0].axisValue + '</span><br/>'
        for (let i = 0; i < params.length - 1; i++) {
          returnData += '<span style="display:inline-block; width:10px; height:8px; margin-right:5px; border-radius:1px; background-color:' + params[i].color + '"></span>'
          returnData += '<span style="font-family: MicrosoftYaHei; font-size: 14px; color: rgba(178, 175, 173, 1); ">' + params[i].seriesName + '：</span><span style="font-family: Verdana; font-size: 12px; color: ' + params[i].color + '">' + params[i].value + '</span><span style="display:inline-block; margin-left: 4px; line-height: 10px; font-family: MicrosoftYaHei; font-size: 12px; color: rgba(178, 175, 173, 1);">车</span><br/>'
        }
        returnData += '</div>'
        return returnData
      }
    },
    grid: {
      left: '1%',
      top: '5%',
      right: '1%',
      bottom: '30%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: '辆',
      splitLine: {
        show: false
      },
      axisLabel: {
        margin: 10,
        fontFamily: 'MicrosoftYaHei',
        fontSize: 12,
        color: 'rgba(113, 113, 113, 1)',
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'category',
      data: ['第一季度', '第二季度', '第三季度', '第四季度'],
      axisLine: {
        show:false
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        margin: 10,
        fontFamily: 'MicrosoftYaHei',
        fontSize: 12,
        color:'#c8dbff'
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: '第一季度',
        type: 'bar',
        stack: 'truck',
        barWidth: 20,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
            {
              offset: 0,
              color: '#c6dfc2',
            },
            {
              offset: 1,
              color: '#2ccc10',
            },
          ]),
          opacity: 0.8,
        },
        label: {
          show: false,
        },
        data: [29, 19, 26, 44]
      },
      {
        name: '第二季度',
        type: 'bar',
        stack: 'truck',
        barWidth: 20,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
            {
              offset: 0,
              color: '#c3be85',
            },
            {
              offset: 1,
              color: '#e8d50b',
            },
          ]),
          opacity: 0.8,
        },
        label: {
          show: false,
        },
        data: [38, 36, 44, 33]
      },
      {
        name: '第三季度',
        type: 'bar',
        stack: 'truck',
        barWidth: 20,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
            {
              offset: 0,
              color: '#7dbeda',
            },
            {
              offset: 1,
              color: '#08ecec',
            },
          ]),
          opacity: 0.8,
        },
        label: {
          show: false,
        },
        data: [33, 45, 30, 23]
      },
      {
        name: '第四季度',
        type: 'bar',
        stack: 'truck',
        barWidth: 20,
        itemStyle: {
          //lenged文本
          opacity: 0.7,
          color: function (params) {
            return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#3e383d', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fdf7f9', // 100% 处的颜色
                  },
                ],
                false
            );
          },
        },
        label: {
          show: false,
        },
        data: [33, 45, 30, 23]
      },
    ],
  };

}
